<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/velocity.js"></script>
    <style>
        .fade-enter,
        .fade-leave-to {
            opacity: 0;
        }
        .fade-enter-active,
        .fade-leave-active {
            -webkit-transition: opacity 1s;
            -moz-transition: opacity 1s;
            -ms-transition: opacity 1s;
            -o-transition: opacity 1s;
            transition: opacity 1s;
        }
    </style>
</head>
<body>
    <div id="root">
        <fade :show="show">
            <div>hello</div>
        </fade>
        <fade :show="show">
            <h1>world</h1>
        </fade>
        <button @click="handleClick">切换</button>
    </div>
    <script>
        Vue.component('fade', {
            props: ["show"],
            template: `<transition
                            name="fade"
                            @before-enter="handleBeforeEnter"
                            @enter="handleEnter"
                            @after-enter="handleAfterLeave"
                            @before-leave="handleBeforeLeave"
                            @leave="handleEnter"
                            @after-leave="handleAfterLeave"
                       >
                            <slot v-if="show"></slot>
                       </transition>`,
            methods: {
                handleBeforeEnter: function (el) {
                    el.style.color = 'red';
                },
                handleEnter: function (el, done) {
                    Velocity(el, {color: 'green'}, {duration: 1000, complete: done})
                },
                handleAfterEnter: function (el) {
                    el.style.color = 'blue';
                },
                handleBeforeLeave: function (el) {
                    el.style.color = 'red';
                },
                handleLeave: function (el, done) {
                    Velocity(el, {color: 'green'}, {duration: 1000, complete: done})
                },
                handleAfterLeave: function (el) {
                    el.style.color = 'blue';
                }
            }
        })

        let vm = new Vue({
            el:"#root",
            data: {
                show: true
            },
            methods: {
                handleClick: function () {
                    this.show = !this.show
                }
            }
        })
    </script>
</body>
</html>